<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <!-- vue的出现是为了操作DOM的,所以,尽量少用jquery -->
</head>
<body>
    <div id="app">
        <!-- 过滤器可以调用多个 -->
        <p>{{msg | num('疯狂') | num('疯狂')}} </p>
    </div>
    <div id="app2">
        <p>{{ dt | privaryDataFromat }}</p>
    </div>
<script>
    /**
     *  过滤器调用时候的格式 {{ name | 过滤器的名称 }}
     *  全局过滤器的定义格式
     *      function中的第一个参数 , 是 过滤器管道符前传递过来的数据
     *      Vue.filter('过滤器的名称',function(data){})
     *  私有过滤器
     *      vue实例中
     *          filters: {
     *              过滤器 : function(data){}
     *          }
     *   如果全局与私有过滤器重名,则优先使用私有过滤器
     */

    // 全局过滤器 => 需要放在Vue对象的上方
    Vue.filter('num',function (data,arg) {
        return data + arg
    })

    var vm =new Vue({
        el: '#app2',
        data: {
            dt: new Date()
        },
        methods: {},
        filters: {
            // 定义私有过滤器 => 要求: 名称 函数
            privaryDataFromat : function (date) {
                const dt = new Date(date);
                let y = dt.getFullYear();
                let m = dt.getMonth() + 1;
                let d = dt.getDate();
                let hh = dt.getHours();
                let mm = dt.getMinutes();
                let ss = dt.getSeconds();
                // `${y}-${m}-${d}` => 模板字符串
                console.log(`${y}-${m}-${d}`);
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }
        }
    })

    /*Vue.filter('num', function (data) {
        return data+"123";
    })*/

    var vm =new Vue({
        el: '#app',
        data: {
            msg: 'haha'
        },
        methods: {

        }
    })
</script>
</body>
</html>